<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/dependence/aos/aos.css" rel="stylesheet" />
    <link href="/dependence/highlight/styles/a11y-dark.css" rel="stylesheet" />
    <link href="./index.css" rel="stylesheet" />
    <title>Document</title>
  </head>

  <body>
    <div class="box">
      <div data-aos="fade-right" class="navbar">
        <div id="site-logo" class="site-logo"></div>
        <ul class="item-group">
          <li class="item">精选文章</li>
          <li class="item">分类</li>
          <li class="item">书籍</li>
          <li class="item">
            <a href="https://gitee.com/dongzi1998" target="_blank"
              ><img class="link-icon" src="./imgs/gitee-fill-round.png"
            /></a>
          </li>
          <li class="item">
            <a href="https://gitee.com/dongzi1998" target="_blank"
              ><img
                class="link-icon"
                src="./imgs/github.png"
                style="background-color: black"
            /></a>
          </li>
        </ul>
        <div class="bottom">
          <p>备案号：XXXXXXXXXXXXX</p>
        </div>
      </div>

      <div data-aos="fade-left" class="content-container">
        <!-- 标题 -->
        <div class="post-title">mysqld-exporter一对多监控及个性化指标采集</div>
        <!-- 时间 -->
        <div class="post-date">2020-19-19</div>
        <!-- 内容 -->
        <div id="post-content" class="post-content"></div>
        <!-- 目录树 -->
      </div>

      <!-- <button id="tool" class="tool"></button> -->
      <div id="post-catalogue" class="post-catalogue cata-hide">
        <div class="BlogAnchor">
          <p>
            <b id="AnchorContentToggle" title="收起" style="cursor: pointer"
              >目录</b
            >
          </p>
          <div class="AnchorContent" id="AnchorContent"></div>
        </div>
      </div>
    </div>
  </body>

  <script src="/dependence/showdown/showdown.min.js"></script>
  <script src="/dependence/showdown/showdown-table.min.js"></script>
  <script src="/dependence/jquery/jquery.js"></script>
  <script src="/dependence/aos/aos.js"></script>
  <script src="/dependence/highlight/highlight.pack.js"></script>

  <script>
    $(document).ready(() => {
      AOS.init();
      // hljs.highlightAll();

      // 获取markdown数据
      text = "# hello, markdown!";
      $.ajax({
        url: "https://www.daived.com/api/front/blog/article/query/one?id=189",
        type: "GET",
        async: false,
        success: (res) => {
          text = res.data.content;
        },
      });

      // showdown实例
      var converter = new showdown.Converter({ extensions: ["table"] }),
        html = converter.makeHtml(text);
      document.getElementById("post-content").innerHTML = html;

      // 代码块高亮
      $("pre code").each(function (i, block) {
        hljs.highlightBlock(block);
      });

      // 生成目录树(支持6级目录树)
      $(".post-content")
        .find("h2,h3,h4,h5,h6")
        .each(function (i, item) {
          var tag = $(item).get(0).localName;
          $(item).attr("id", "wow" + i);
          $("#AnchorContent").append(
            '<li><a class="new' +
              tag +
              ' anchor-link"  href="#wow' +
              i +
              '" >' +
              (i + 1) +
              " · " +
              $(this).text() +
              "</a></li>"
          );
          $(".newh2").css("margin-left", 0);
          $(".newh3").css("margin-left", 20);
          $(".newh4").css("margin-left", 40);
          $(".newh5").css("margin-left", 60);
          $(".newh6").css("margin-left", 80);
        });
    });

    $("#post-catalogue").hover(
      () => {
        let _aos = $("#post-catalogue").attr("data-aos");
        _aos ? fn1() : fn2();
      },
      () => {
        let _aos = $("#post-catalogue").attr("data-aos");
        _aos ? fn1() : fn2();
      }
    );

    function fn1() {
      $("#tool").css("right", "0px");
      $("#post-catalogue").attr("data-aos", "");
      $("#post-catalogue").toggleClass("aos-init aos-animate cata-hide");
    }

    function fn2() {
      $("#tool").css("right", "200px");
      $("#post-catalogue").attr("data-aos", "fade-left");
      $("#post-catalogue").toggleClass("aos-init aos-animate cata-hide");
    }

    $(".anchor-link").click(function () {
      $("html,body").animate(
        {
          scrollTop: $($(this).attr("link")).offset().top,
        },
        1000
      );
    });
  </script>
</html>
